<template>
	<view class="quickSend">
		
		<!-- 导航栏 -->
		<view class="box-title">
			<view class="back_pages" :style="'position: absolute; left: 30rpx; top:'+ titleHeight +'rpx;'" @click="backPage">
				<u-icon size="35" name="arrow-leftward"></u-icon>
			</view>
			<view class="title-text">
				社团公益
			</view>
		</view>
		
		<!-- 搜索框 -->
		<view class="inputp">
			<view class="inputs">
				<uni-icons type="search" size="20" style="margin-left: 20rpx;"></uni-icons>
				<input  type="text" v-model="queryParam.keyword" placeholder="输入关键字搜索" ref='searchinput' class='scaninput'
				  @search="getSearch()" @input="inputChange" @confirm="getSearch()">
				<uni-icons type="close" size="20" color="#a7a7a7" style="padding-right: 20rpx;" v-if="isDelShow" @click="clearSearch"></uni-icons>
				<view class="scan_weizhi">
					<view class="scan_btn" @tap="getSearch()">搜索</view>
				</view>
			</view>
		</view>
		
		<!-- 专题板块 -->
		<view class="btn-card" style="margin-top: 32rpx; padding-top: 20rpx;">
			<swiper :class="showHeight" style="border-radius: 10rpx;">
				<swiper-item v-for="(itemList, indexList) in categoryList" :key="indexList"
					style="border-radius: 10rpx;;">
					<u-grid :border="false" :col="colData">
						<u-grid-item v-for="(item, index) in itemList" :key="index" @click="toSubjectList(item)">
							<!-- <image class="grid-image" :src="item.img"></image> -->
							<u-icon :name="item.icon" :size="100"></u-icon>
							<text class="grid-text">{{ item.name }}</text>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
		</view>
		
		
		<view class="special-title" style="margin: 40rpx 24rpx 0;">
			<view class="title"><text class="green-title">商品</text>列表</view>
		</view>
		<view class="goods-list">
			<view v-for="(item, index) in skuList" :key="index" class="goods-item" @click="goShopInfoPage(item)">
				<image :src="item.skuImg" mode="aspectFill" class="sku-img"></image>
				<view class="title">{{ item.skuTitle }}</view>
				<view v-if="item.isActivity == '1'" style="display: flex;flex-direction: row; padding-left: 20rpx; margin-top: 5rpx;">
					<view style="text-decoration:line-through; font-size: 28rpx; color: darkgray;">
						{{item.linePrice}}
					</view>
					<view style=" border-radius: 5rpx; margin-left: auto; margin-right: 5rpx; height: 36rpx;font-size: 20rpx; padding: 2rpx 10rpx; background: #FF3333; color: #FFFFFF;">
						促销
					</view>
				</view>
				<view class="price-item">
					<view class="price-box">￥{{ item.skuPrice.toFixed(2) }}</view>
					<image src="../../../static/image/cart-green.png" mode="aspectFit" class="cart-icon"></image>
				</view>
				<!-- <view class="icon-image">
					{{item.skuType == 1?'商品':(item.skuType == 2 && item.skuServiceType == 2?'配送':'到店')}}
				</view> -->
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 查询参数
				queryParam: {
					isPriceSort: '是',
					spuAddType: 2,
					keyword: '',
					pageNum: 1
				},
				// 手机胶囊高度
				titleHeight: '',
				colData: 4,
				showHeight: 'heightOne',
				categoryList: [],
				skuList: [],
				// 商品查询完成
				finished: false,
				isDelShow: false
			}
		},
		onLoad() {
			// 获取商品分类
			this.getCommodityClass();
			// 获取胶囊高度
			this.getPhoneHeightStatus()
			// 商品列表
			this.getSkuList();
		},
		// 拉到底部 触发加载新一页商品
		onReachBottom() {
			if (!this.finished) {
				this.queryParam.pageNum++;
				this.getSkuList();
			} else {
				this.$u.toast("没有更多了...");
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
		},
		methods: {
			// 搜索
			// 点击搜索
			getSearch(){
				this.getSkuList()
			},
			
			// 清除输入框
			clearSearch(){
				this.queryParam.keyword = '',
				this.isDelShow = false;
				this.getSkuList()
			},
			
			//监听输入
			inputChange(event){
				//判断输入框是否有值输入，决定是否出现删除符号
					if (this.queryParam.keyword.length>0) {
						console.log(this.queryParam.keyword.length)
						this.isDelShow = true;
						console.log("大过零")
					}else{
						this.isDelShow = false;
						console.log("不大于零")
					}
			},
			// 点击专题
			// 跳转专题商品列表
			toSubjectList(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pagesB/quickSend/home/search",
					success: res => {
						res.eventChannel.emit('item', item)
					}
				}) 
			},
			// 获取商品分类
			getCommodityClass() {
				this.$api.request.getCommodityClass({
					catalogType: 2
				}, res => {
					console.log(res);
					if (res.code == 200) {
						this.categoryList = res.data
						this.showHeight = res.data[0].length > 5 ? 'heightTwo' : 'heightOne'
						// this.colData = res.data.length > 1 ? 5 : (res.data[0].length > 4 ? 5 : 4)
					}
				})
			},
			/** 获取商品列表 */
			getSkuList() {
				let that = this;
				this.$api.request.mainSkuList(this.queryParam, res => {
					if (res.code == 200) {
						if (that.queryParam.pageNum > 1) {
							res.data.products.forEach(item => that.skuList.push(item));
						} else {
							that.skuList = res.data.products;
						}
						if (res.data.totalPages <= res.data.pageNum) {
							that.finished = true;
						}
					}
				});
			},
			/**
			 * 获取手机状态栏高度
			 */
			getPhoneHeightStatus() {
				let systemInfo = uni.getSystemInfoSync();
				let pxToRpxScale = 750 / systemInfo.windowWidth; //px转换到rpx的比例
				let fontSize = systemInfo.fontSizeSetting * pxToRpxScale; // 用户设置的字体大小
				let statuHeight = systemInfo.statusBarHeight * pxToRpxScale; //状态栏的高度
				let titleHeight = statuHeight + (48 - 32) / 2; //导航栏高度，这个一般是固定的
				console.log(titleHeight);
				this.titleHeight = titleHeight
			},
			// 返回
			backPage() {
				uni.navigateBack()
			},
			// 点击商品
			//进入商品购物页面
			goShopInfoPage(item) {
				// uni.navigateTo({
				// 	url: '/pagesB/quickSend/home/productInfo?id=' + item.skuId
				// })
				uni.navigateTo({
					url: '/pages/sys/home/product?id=' + item.skuId
				})
			},
		}
	}
</script>

<style lang="scss">
	.quickSend {
		width: 100vw;
		height: 280rpx;
		// background: linear-gradient(140deg, #29B16B 0%, #62D39C 100%);
		background: linear-gradient(360deg, #FFFFFF 0%, #E9FFF8 40%, #C7FFEC 100%);
		
		.btn-card {
			width: calc(100% - 46rpx);
			margin: 0 23rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
		
			.grid-image {
				width: 71rpx;
				height: 71rpx;
			}
		
			.grid-text {
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				line-height: 20px;
				margin-top: 10rpx;
			}
		}
	}
	
	.inputp {
		width: auto;
		margin: 0 24rpx;
		margin-top: 24rpx;
		// border-radius: 36rpx;
		
		.inputs {
			background: #F2F2F2;
			border-radius: 36rpx;
			position: relative;
	        display: flex;
			align-items: center;
			// background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 12%, #F5F6F7 100%) !important;
			background: linear-gradient(180deg, #FFFFFF 100%, #FFFFFF 100%, #FFFFFF 100%) !important;
			border: 1px solid rgba(76, 167, 117, 1);			
			
			.scaninput {
				width: 500rpx;
				height: 60rpx;
				padding-left: 10rpx;
				display: flex;
				align-items: center;
				//background-color: #007AFF;
			}
	
			.searchimg {
				width: 1em;
				height: 1em;
				position: absolute;
				//top: 25upx;
				left: 20upx;
			}
	
			.scanimg {
				width: 1em;
				height: 1em;
				position: absolute;
				//top: 25upx;
				right: 36rpx;
			}
	
			.searchbtn {
				position: absolute;
				//right: 20upx;
				//top: 15upx;
				// border-radius: 5upx;
				//margin-right: -250rpx;
				background-color: rgba(76, 167, 117, 1);
				color: #fff;
				width: 4em;
				line-height: 2em;
				text-align: center;
				font-size: 0.8em;
				
			}
			.scan_weizhi{
				display: flex;
				justify-content: flex-end;
				height: 65rpx;
				position: relative;
				right: -6rpx;
				.scan_btn{
					width: 140rpx;
					height: 68rpx;
					color: #FFF;
					background: linear-gradient(145deg, #33CA7C 0%, #48EB9C 100%);
					border-radius: 40rpx;					
					display:flex;
					flex-direction:row;    
					align-items: center;
					justify-content:center;
					margin-right: -2rpx;
					margin-top: -2rpx;
				}
			}
			
		}
	}
	
	.heightOne {
		height: 170rpx !important;
	}
	
	.heightTwo {
		height: 410rpx !important;
	}
	
	.box-title{
		width: 100vw;
		height: 150rpx;
		display: flex;
		flex-direction: column;
	}
	.title-text{
		font-size: 36rpx;
		font-weight: 500;
		color: #111111;
		text-align: center;
		margin-top: 5vh;
	}
	.back_pages {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: rgba(0, 0, 0, 0.4);
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99999;
	}
	.title-status-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 30rpx;
	}
	
	.guess-like {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 30rpx 23rpx 0;
		margin-top: 50rpx;
	}
	
	.product-food-list{
		// width: 100vw;
		// height: 400rpx;
		padding: 60rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-around;
		
		.goods-item {
			width: 49%;
			display: flex;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
			// padding: 0 10rpx 10rpx;
			flex-direction: column;
			background: #FFFFFF;
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
			// position: relative;
		
			&:nth-child(2n+1) {
				margin-right: 2%;
			}
		
			.sku-img {
				width: 100%;
				height: 280rpx;
				// height: 100%;
				// min-height: 300rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}
		
			.title {
				color: #222222;
				font-weight: bold;
				margin: 0 20rpx;
				font-size: 26rpx;
				line-height: 30rpx;
				margin-top: 16rpx;
			}
		
			.sub-title {
				color: #9B9B9B;
				font-size: 22rpx;
				overflow: hidden;
				margin: 0 20rpx;
				margin-top: 10rpx;
				line-height: 26rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		
			.price-box {
				color: #E71E22;
				font-size: 28rpx;
				margin: 0 20rpx;
				margin-top: 16rpx;
				line-height: 30rpx;
				font-weight: bold;			
			}
		}
	}
	
	
	.special-title{
		font-size: 32rpx;
		position: relative;
		font-family: 'DOUYU';
		font-style: italic;
		font-weight: bold;
		text-align: center;
		color: #111111;
		.green-title{
			color: #009F60;
		}
		&:before{
			content: "";
			width: 70rpx;
			height: 2rpx;
			background: #D2D2D2;
			position: absolute;
			left: 28%;
			top: 50%;
		}
		&:after{
			content: "";
			width: 70rpx;
			height: 2rpx;
			background: #D2D2D2;
			position: absolute;
			right: 28%;
			top: 50%;
		}
	}
	
	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		// column-count: 2;
		// column-gap: normal;
		padding: 20rpx 23rpx;
		margin-top: 10rpx;
	
		.goods-item {
			width: 49%;
			break-inside: avoid;
			// width: 100%;
			height: 100%;
			display: flex;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
			// padding: 0 10rpx 10rpx;
			flex-direction: column;
			background: #FFFFFF;
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
			// position: relative;
	
			&:nth-child(2n+1) {
				margin-right: 2%;
			}
	
			.sku-img {
				width: 340rpx;
				height: 340rpx;
				min-height: 300rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}
	
			.title {
				color: #111111;
				font-weight: bold;
				margin: 0 20rpx;
				font-size: 28rpx;
				line-height: 30rpx;
				margin-top: 16rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
	
			.sub-title {
				color: #9B9B9B;
				font-size: 22rpx;
				overflow: hidden;
				margin: 0 20rpx;
				margin-top: 10rpx;
				line-height: 26rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.price-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 16rpx 20rpx 0;
			}
			.price-box {
				color: #009B65;
				font-size: 28rpx;
				line-height: 30rpx;
				font-weight: bold;
			}
			.cart-icon{
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
</style>